<template>
	<view class="ask-list">
		<block v-if="show">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ask-list-tips" v-if="appid==='wx9528157f77bff5d2'">
				{{checked?'已开启消息回复推送':'点击开启接收工厂消息回复'}}
				<u-switch v-model="checked" :loading="loading" :disabled="checked?true:false" active-color="#1eb500"></u-switch>
			</view>
			<!-- #endif -->
			<view class="ask-list-tabs" v-show="false">
				<u-tabs
					:current="QAIndex"
					:show-bar="false"
					:list="QATabs"
					font-size="24"
					active-color="#141414" 
					inactive-color="#757575" 
					@change="changeQATab">
				</u-tabs>
			</view>
			<view class="ask-items" v-if="QAList.length">
				<view class="ask-item" v-for="(data,index) in QAList" :key="index">
					<view class="Q">
						<view class="tag">Q</view>
						<view>{{data.content}}</view>
						<view class="time">{{data.add_time}}</view>
					</view>
					<view class="A">
						<view class="tag">A</view>
						<view v-if="!data.answer.length">此问题尚未回答</view>
						<view v-else>
							<view v-for="(item,y) in data.answer" :key="y" :style="{marginTop: y > 0 ? '20rpx':''}">
								<view style="display: flex;">
									<view style="flex: 1;"><block v-if="y>0">补充</block>回复：{{item.content}}</view>
									<view class="time" style="flex: none; color: #999; margin-left: 20rpx;">{{item.answer_time}}</view>
								</view>
								<view class="imgs" v-if="item.img">
									<image 
										:src="url" 
										v-for="(url,i) in item.imgs" 
										mode="aspectFill" 
										@click.stop="previewImage(url,item.imgs)" 
										:key="i">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="answer-btn" v-if="userInfo.is_admin && userInfo.is_admin != 0" @click="answer(data,index)">
						<view>回答此问题</view>
					</view>
				</view>
			</view>
			<block v-else>
				<!-- #ifdef MP-WEIXIN -->
				<pt-nothing
					:fixed="true"
					text="暂无问答"
					:top="84"
					:bottom="120"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1"
					bgColor="#FFF">
				</pt-nothing>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<pt-nothing
					:fixed="true"
					text="暂无问答"
					:bottom="120"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1"
					bgColor="#FFF">
				</pt-nothing>
				<!-- #endif -->
			</block>
			<view class="ask-btn">
				<view @click="goForm">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon8.png" mode="widthFix"></image>我要提问
				</view>
			</view>
			
			<uni-popup type="bottom" ref="answerQuestion">
				<view class="answer-question">
					<view class="answer-question-tit">{{questionInfo.question_tit}}</view>
					<textarea placeholder="温馨提醒：为了更好的安全服务，回复过程中禁止出现微信、手机号码，厂家请勿私加客户微信，谢谢！" v-model="questionInfo.content" :fixed="true" :focus="false" :adjust-position="true" :cursor-spacing="50" @blur="blur" placeholder-style="color: #AAA"></textarea>
					<view class="upimg">
						<u-upload 
							:action="action" 
							:form-data="formData" 
							:max-count="3" 
							width="160" 
							@on-uploaded="onSuccess"
							@on-remove="onRemove"
							@on-choose-complete="onChooseComplete"
							:preview-full-image="false"
							image-mode="aspectFit"
							:show-progress="false">
						</u-upload>
					</view>
					<view :class="['complate',{isSubmit: isSubmit}]" @click="$u.throttle(submit, 2000)">
						<u-loading mode="flower" style="margin-right: 20rpx;" v-if="isSubmit"></u-loading>
						完成
					</view>
				</view>
			</uni-popup>
			
			<uni-popup type="center" ref="templeteMessage" :maskClick="false">
				<view class="templeteMessage-box">
					<view class="templeteMessage-box-close"><u-icon name="close" size="40" @click="closeTempleteMessage"></u-icon></view>
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/tips.png?v=2"></image>
					<view class="templeteMessage-tit">打开咨询回复提醒</view>
					<view class="templeteMessage-subtit">开启提醒，第一时间了解详情</view>
					<view class="templeteMessage-btn" @click="TemplateMessage">马上开启</view>
				</view>
			</uni-popup>
			
			<pt-openSetting 
				ref="openSetting" 
				tips="您已关闭订阅消息主开关，请打开主开关后重新开启消息回复推送"
				@closeOpenSetting="closeOpenSetting">
			</pt-openSetting>
			
		</block>
		
		<pt-loading></pt-loading>
		
	</view>
</template>

<script>
	import FormData from '@/api/http.interceptor.js'
	export default {
		data() {
			return {
				appid: '',
				checked: false,
				loading: false,
				controlStatus: false,
				isSubmit: false,
				show: false,
				goods_id: '',
				goods_type: '',
				page: 0,
				QAIndex: 0,
				QATabs: [],
				QAList: [],
				isLoading: false,
				noMore: false,
				userInfo: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):'',
				questionInfo: {
					index: '',
					type: '',
					question_tit: '',
					ask_id: '',
					content: ''
				},
				isMerchant: false,
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				scrollTop: 1,
				// 图片上传地址
				action: `${this.$domain}/api/Upimg/UpImg`,
				formData: FormData.sign(),
				imgLists: []
			};
		},
		watch: {
			checked(val) {
				if (val == true) {
					if(this.controlStatus == true) {
						this.controlStatus = false;
						return ;
					}
					this.checked = true;
					this.loading = true;
					this.openMessagePop();
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			this.goods_type = options.goods_type
			if(options.isMerchant){
				this.isMerchant = true
			}
			if(uni.getStorageSync('userInfo')){
				this.addFoot('工厂问答-列表')
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.getWXAuth(1)
			this.appid = uni.getExtConfigSync().appid
			// #endif
			this.page = 0
			this.noMore = false
			this.QAList = []
			this.init()
		},
		methods: {
			blur(){
				// #ifdef H5
				uni.pageScrollTo({
					duration: 0,
					scrollTop: this.scrollTop - 1
				})
				// #endif
			},
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: this.isMerchant?0:this.goods_id,
					store_goods_id: this.isMerchant?this.goods_id:0,
					is_new: 1
				})
			},
			getWXAuth(type){
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						if(type){
							if(res.subscriptionsSetting.itemSettings){
								if(res.subscriptionsSetting.itemSettings['pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k'] && res.subscriptionsSetting.itemSettings['pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k']==='accept'){
									this.checked = true;
									this.controlStatus = true;
								}
							}
							return
						}
						if(res.subscriptionsSetting.itemSettings){
							if(res.subscriptionsSetting.itemSettings['pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k']){
								this.checked = true;
								uni.showToast({
									icon: 'none',
									title: '已开启消息回复通知,可以在“我的>消息”中查看回复',
									duration: 1500
								})
							}else{
								this.checked = false;
								uni.showToast({
									icon: 'none',
									title: '您未选择“总是保持以上选择，不再询问”，消息回复仅此次有效',
									duration: 1500
								})
							}
						}else{
							this.checked = false;
							uni.showToast({
								icon: 'none',
								title: '您未选择“总是保持以上选择，不再询问”，消息回复仅此次有效',
								duration: 1500
							})
						}
					}
				})
			},
			openMessagePop(){
				uni.getSetting({
					withSubscriptions: true,
					success: (success) => {
						if(!success.subscriptionsSetting.mainSwitch){
							this.loading = false
							this.checked = false
							this.$refs.openSetting.init()
						}else{
							this.$refs.templeteMessage.open()
						}
					}
				})
			},
			TemplateMessage() {
				uni.requestSubscribeMessage({
					tmplIds: [
						'pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k'
					],
					complete: (e) => {
						if(e.errCode==20004){
							this.$refs.openSetting.open()
							return false
						}
						let name = e['pd3uEi6jy-GhUpQkjLKfvFSPe6K-fs64I-oSoGRhb9k']
						switch (name){
							case 'accept':
								this.getWXAuth()
								this.loading = false;
								this.$refs.templeteMessage.close()
								break;
							case 'reject':
								uni.showToast({
									icon: 'none',
									title: '您已拒绝接收通知，将不会收到消回复通知'
								})
								this.checked = false;
								this.loading = false;
								this.$refs.templeteMessage.close()
								break;
						}
					}
				})
			},
			closeTempleteMessage(){
				this.$refs.templeteMessage.close()
				this.checked = false
				this.loading = false
			},
			init(){
				this.$u.api.AskLists({page: this.page,goods_id: this.goods_id,goods_type: this.goods_type}).then(res => {
					this.show = true
					this.isLoading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							if(item.answer.length){
								item.answer.forEach(answerItem => {
									if(answerItem.img){
										this.$set(answerItem,'imgs',answerItem.img.split(','))
									}
								})
							}
							this.QAList.push(item)
						})
						console.log(this.QAList)
					}else{
						this.noMore = true
					}
				}).catch(() => {
					this.show = true
				})
			},
			changeQATab(e){
				this.QAIndex = e
			},
			goForm(){
				if(this.isMerchant){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/ask-form/ask-form?goods_id=' + this.goods_id + '&isMerchant=true'
					})
				}else{
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/ask-form/ask-form?goods_id=' + this.goods_id
					})
				}
			},
			answer(data,index){
				this.questionInfo.content = ''
				this.questionInfo.index = index
				this.questionInfo.question_tit = data.content
				this.questionInfo.ask_id = data.ask_id
				this.$refs.answerQuestion.open()
			},
			submit(){
				if(!this.questionInfo.content){
					uni.showToast({
						icon: 'none',
						title: '请输入回答'
					})
					return
				}
				if(this.isSubmit){
					uni.showToast({
						icon: 'none',
						title: '请勿重复提交'
					})
					return
				}
				this.isSubmit = true
				this.$u.api.AddAnswer({
					type: this.questionInfo.type,
					ask_id: this.questionInfo.ask_id,
					content: this.questionInfo.content,
					goods_id: this.goods_id,
					img: this.imgLists.join(',')
				}).then(res => {
					this.isSubmit = false
					uni.showToast({
						icon: 'none',
						title: '回答成功'
					})
					this.addFoot('工厂问答-回答')
					this.init()
					this.$refs.answerQuestion.close()
				})
			},
			onSuccess(lists, name){
				this.imgLists = []
				if(lists.length){
					lists.forEach(item => {
						this.imgLists.push(item.response.datas[0])
					})
				}
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '上传成功'
				})
			},
			onRemove(index, lists){
				this.imgLists = []
				if(lists.length){
					lists.forEach(item => {
						this.imgLists.push(item.response.datas[0])
					})
				}
			},
			onChooseComplete(){
				uni.showLoading({
					title: '上传中'
				})
			},
			previewImage(current,urls){
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			closeOpenSetting(){
				this.checked = false
				this.loading = false
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	.ask-list{
		padding-bottom: 120rpx;
	}
	.ask-list-tips{
		padding: 30rpx 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ask-items{
		padding: 30rpx 30rpx 1rpx;
	}
	.ask-item{
		background-color: #F2F2F2;
		padding: 20rpx;
		border: 2rpx solid rgba(242,242,242,1);
		border-radius: 8rpx;
		margin-bottom: 30rpx;
		.answer-btn{
			margin-top: 20rpx;
			view{
				display: inline-block;
				background-color: #141414;
				color: #FFF;
				font-size: 24rpx;
				padding: 10rpx;
				border-radius: 8rpx;
			}
		}
		.Q,.A{
			display: flex;
			view{
				flex: 1;
				min-width: 0;
				line-height: 46rpx;
			}
			.tag{
				width: 32rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				font-size: 24rpx;
				color: #FFF;
				border-radius: 50%;
				margin-right: 20rpx;
				margin-top: 8rpx;
				flex: none;
			}
		}
		.Q{
			margin-bottom: 20rpx;
			.tag{
				background-color: #141414;
			}
			view{
				font-weight: bold;
			}
			.time{
				font-weight: normal;
				font-size: 24rpx;
				color: #999;
				flex: none;
			}
		}
		.A{
			.tag{
				background-color: #A8A8A8;
			}
			view{
				color: #757575;
				font-size: 24rpx;
				white-space: pre-wrap;
			}
			.imgs{
				display: flex;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 30rpx;
					margin-top: 10rpx;
					&:last-child{
						margin-right: 0;
					}
				}
			}
		}
	}
	.ask-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #FFF;
		border-top: solid 2rpx #F4F4F4;
		padding-top: 15rpx;
		z-index: 10;
		view{
			margin: 0 75rpx;
			height: 90rpx;
			line-height: 90rpx;
			color: #FFF;
			border-radius: 8rpx;
			background-color: #141414;
			text-align: center;
			image{
				width: 30rpx;
				height: 30rpx;
				vertical-align: middle;
				margin: -4rpx 10rpx 0 0;
			}
		}
	}
	.answer-question{
		background-color: #FFF;
		padding: 30rpx;
		border-radius: 10rpx 10rpx 0 0;
		.answer-question-tit{
			font-weight: bold;
			font-size: 30rpx;
		}
		textarea{
			width: 100%;
			margin: 20rpx 0;
			height: 200rpx;
			font-size: 28rpx;
		}
		.upimg{
			margin: -4px;
			padding-bottom: 20rpx;
		}
		.complate{
			height: 80rpx;
			line-height: 80rpx;
			background-color: #141414;
			color: #FFF;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			&.isSubmit{
				opacity: .5;
			}
		}
	}
	.templeteMessage-box{
		width: 600rpx;
		padding: 40rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		text-align: center;
		.templeteMessage-box-close{
			text-align: right;
			color: #999;
			margin-bottom: 25rpx;
		}
		.templeteMessage-tit{
			padding: 50rpx 0 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #141414;
		}
		.templeteMessage-subtit{
			color: #909090;
			font-size: 24rpx;
		}
		image{
			display: inline-block;
			width: 350rpx;
			height: 323rpx;
			border-radius: 10rpx;
		}
		.templeteMessage-btn{
			border-radius: 8rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #141414;
			color: #FFF;
			font-size: 28rpx;
			margin-top: 80rpx;
		}
	}
</style>
